<template>
  <view class="book-container">
    <!-- 疫苗信息卡片 -->
    <view class="vaccine-card card">
      <image :src="vaccine.image" mode="aspectFill" class="vaccine-image" />
      <view class="info">
        <text class="name">{{ $t(vaccine.nameKey) }}</text>
        <text class="desc">{{ $t(vaccine.descKey) }}</text>
        <view class="price-info">
          <text class="price" v-if="vaccine.price > 0">MOP {{ vaccine.price }}</text>
          <text class="free" v-else>{{ $t('vaccine.free') }}</text>
        </view>
      </view>
    </view>
    
    <!-- 预约信息表单 -->
    <view class="book-form card">
      <view class="section-title">预约信息</view>
      
      <!-- 接种人信息 -->
      <view class="form-item">
        <text class="label">接种人</text>
        <view class="patient-select" @tap="showPatientSelect">
          <text>{{ selectedPatient ? selectedPatient.name : '请选择接种人' }}</text>
          <text class="iconfont icon-arrow-right"></text>
        </view>
      </view>
      
      <!-- 接种日期 -->
      <view class="form-item">
        <text class="label">接种日期</text>
        <view class="date-list">
          <scroll-view scroll-x class="scroll-view" show-scrollbar="false">
            <view 
              class="date-item"
              v-for="(date, index) in availableDates"
              :key="index"
              :class="{ active: selectedDate === date.value }"
              @tap="selectDate(date.value)"
            >
              <text class="week">{{ date.week }}</text>
              <text class="day">{{ date.day }}</text>
              <text class="month">{{ date.month }}月</text>
            </view>
          </scroll-view>
        </view>
      </view>
      
      <!-- 接种时间段 -->
      <view class="form-item">
        <text class="label">接种时间</text>
        <view class="time-grid">
          <view 
            class="time-item"
            v-for="(time, index) in availableTimes"
            :key="index"
            :class="{ 
              active: selectedTime === time.value,
              disabled: time.disabled
            }"
            @tap="selectTime(time)"
          >
            <text class="time-text">{{ time.label }}</text>
            <text class="count" v-if="!time.disabled">剩余{{ time.count }}个</text>
          </view>
        </view>
      </view>
      
      <!-- 备注信息 -->
      <view class="form-item">
        <text class="label">备注信息</text>
        <textarea 
          v-model="remark"
          placeholder="请填写备注信息（选填）"
          maxlength="200"
          class="remark-input"
        />
        <text class="word-count">{{ remark.length }}/200</text>
      </view>
    </view>
    
    <!-- 接种须知 -->
    <view class="notice-card card">
      <view class="section-title">接种须知</view>
      <view class="notice-list">
        <view class="notice-item" v-for="(notice, index) in notices" :key="index">
          <text class="dot">·</text>
          <text class="text">{{ notice }}</text>
        </view>
      </view>
    </view>
    
    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <view class="price-info">
        <text class="label">费用：</text>
        <text class="price" v-if="vaccine.price > 0">MOP {{ vaccine.price }}</text>
        <text class="free" v-else>{{ $t('vaccine.free') }}</text>
      </view>
      <button 
        class="submit-btn primary-btn"
        :disabled="!canSubmit"
        @tap="submitBooking"
      >
        确认预约
      </button>
    </view>
    
    <!-- 选择接种人弹窗 -->
    <uni-popup ref="patientPopup" type="bottom">
      <view class="patient-popup">
        <view class="popup-header">
          <text class="title">选择接种人</text>
          <text class="close" @tap="closePatientPopup">×</text>
        </view>
        <view class="patient-list">
          <view 
            class="patient-item"
            v-for="(patient, index) in patients"
            :key="index"
            :class="{ active: selectedPatientId === patient.id }"
            @tap="selectPatient(patient)"
          >
            <view class="patient-info">
              <text class="name">{{ patient.name }}</text>
              <text class="id-card">{{ patient.idCard }}</text>
            </view>
            <text class="relation">{{ patient.relation }}</text>
          </view>
          <view class="add-patient" @tap="addNewPatient">
            <text class="iconfont icon-add"></text>
            <text>添加接种人</text>
          </view>
        </view>
        <view class="popup-footer">
          <button class="confirm-btn primary-btn" @tap="confirmPatient">
            确认选择
          </button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'

// 疫苗信息
const vaccine = ref({
  id: 1,
  nameKey: 'vaccine.list.covid.name',
  descKey: 'vaccine.list.covid.desc',
  image: '/static/vaccine/covid.jpg',
  price: 0
})

// 可选日期
const availableDates = [
  { value: '2024-03-21', week: '周四', day: '21', month: '3' },
  { value: '2024-03-22', week: '周五', day: '22', month: '3' },
  { value: '2024-03-23', week: '周六', day: '23', month: '3' },
  { value: '2024-03-24', week: '周日', day: '24', month: '3' },
  { value: '2024-03-25', week: '周一', day: '25', month: '3' }
]

// 可选时间
const availableTimes = [
  { value: '0900', label: '09:00', count: 10 },
  { value: '0930', label: '09:30', count: 8 },
  { value: '1000', label: '10:00', count: 5 },
  { value: '1030', label: '10:30', disabled: true },
  { value: '1100', label: '11:00', count: 3 }
]

// 接种人列表
const patients = [
  { id: 1, name: '张三', idCard: '1234567890', relation: '本人' },
  { id: 2, name: '张小明', idCard: '0987654321', relation: '子女' }
]

// 接种须知
const notices = [
  '请携带身份证件准时到达接种点',
  '接种前请确保身体状况良好，无发热等症状',
  '接种后需要留观30分钟',
  '如有特殊情况请提前与工作人员沟通'
]

// 表单数据
const selectedDate = ref('')
const selectedTime = ref('')
const selectedPatient = ref(null)
const selectedPatientId = ref(null)
const remark = ref('')

// 弹窗引用
const patientPopup = ref(null)

// 是否可以提交
const canSubmit = computed(() => {
  return selectedDate.value && selectedTime.value && selectedPatient.value
})

// 选择日期
const selectDate = (date) => {
  selectedDate.value = date
}

// 选择时间
const selectTime = (time) => {
  if (!time.disabled) {
    selectedTime.value = time.value
  }
}

// 显示选择接种人弹窗
const showPatientSelect = () => {
  patientPopup.value?.open()
}

// 关闭选择接种人弹窗
const closePatientPopup = () => {
  patientPopup.value?.close()
}

// 选择接种人
const selectPatient = (patient) => {
  selectedPatientId.value = patient.id
}

// 确认选择接种人
const confirmPatient = () => {
  if (selectedPatientId.value) {
    selectedPatient.value = patients.find(p => p.id === selectedPatientId.value)
    closePatientPopup()
  }
}

// 添加新接种人
const addNewPatient = () => {
  uni.navigateTo({
    url: '/pages/patient/add'
  })
}

// 提交预约
const submitBooking = () => {
  if (!canSubmit.value) return
  
  uni.showLoading({
    title: '提交中...'
  })
  
  // 模拟提交
  setTimeout(() => {
    uni.hideLoading()
    uni.showModal({
      title: '预约成功',
      content: '您的疫苗预约已提交成功',
      showCancel: false,
      success: () => {
        uni.navigateBack()
      }
    })
  }, 1500)
}
</script>

<style lang="scss">
.book-container {
  min-height: 100vh;
  padding-bottom: 120rpx;
  
  .vaccine-card {
    display: flex;
    margin: 20rpx;
    
    .vaccine-image {
      width: 160rpx;
      height: 120rpx;
      border-radius: $radius-md;
      margin-right: 20rpx;
      object-fit: cover;
    }
    
    .info {
      flex: 1;
      
      .name {
        font-size: 32rpx;
        color: $text-primary;
        font-weight: bold;
        margin-bottom: 10rpx;
        display: block;
      }
      
      .desc {
        font-size: 26rpx;
        color: $text-regular;
        margin-bottom: 16rpx;
        display: block;
      }
      
      .price-info {
        .price {
          font-size: 32rpx;
          color: $danger;
          font-weight: bold;
        }
        
        .free {
          font-size: 32rpx;
          color: $success;
          font-weight: bold;
        }
      }
    }
  }
  
  .book-form {
    margin: 20rpx;
    
    .form-item {
      margin-bottom: 30rpx;
      
      .label {
        font-size: 28rpx;
        color: $text-primary;
        font-weight: bold;
        margin-bottom: 16rpx;
        display: block;
      }
      
      .patient-select {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 88rpx;
        padding: 0 30rpx;
        background: $bg-color;
        border-radius: $radius-md;
        
        text {
          font-size: 28rpx;
          color: $text-regular;
          
          &.icon-arrow-right {
            font-size: 24rpx;
            color: $text-secondary;
          }
        }
      }
      
      .date-list {
        .scroll-view {
          white-space: nowrap;
          margin: 0 -30rpx;
          padding: 0 30rpx;
        }
        
        .date-item {
          display: inline-flex;
          flex-direction: column;
          align-items: center;
          padding: 20rpx 30rpx;
          margin-right: 20rpx;
          background: $bg-color;
          border-radius: $radius-md;
          transition: all 0.3s;
          
          &.active {
            background: $primary-color;
            
            text {
              color: #fff;
            }
          }
          
          .week {
            font-size: 24rpx;
            color: $text-regular;
            margin-bottom: 8rpx;
          }
          
          .day {
            font-size: 32rpx;
            color: $text-primary;
            font-weight: bold;
            margin-bottom: 4rpx;
          }
          
          .month {
            font-size: 22rpx;
            color: $text-secondary;
          }
        }
      }
      
      .time-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20rpx;
        
        .time-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 20rpx;
          background: $bg-color;
          border-radius: $radius-md;
          transition: all 0.3s;
          
          &.active {
            background: $primary-color;
            
            text {
              color: #fff;
            }
          }
          
          &.disabled {
            opacity: 0.5;
            
            text {
              color: $text-secondary;
            }
          }
          
          .time-text {
            font-size: 28rpx;
            color: $text-primary;
            margin-bottom: 8rpx;
          }
          
          .count {
            font-size: 22rpx;
            color: $text-regular;
          }
        }
      }
      
      .remark-input {
        width: 100%;
        height: 160rpx;
        padding: 20rpx;
        background: $bg-color;
        border-radius: $radius-md;
        font-size: 28rpx;
        color: $text-primary;
      }
      
      .word-count {
        font-size: 24rpx;
        color: $text-secondary;
        text-align: right;
        margin-top: 8rpx;
        display: block;
      }
    }
  }
  
  .notice-card {
    margin: 20rpx;
    
    .notice-list {
      .notice-item {
        display: flex;
        margin-bottom: 16rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .dot {
          margin-right: 8rpx;
          color: $primary-color;
        }
        
        .text {
          flex: 1;
          font-size: 26rpx;
          color: $text-regular;
          line-height: 1.6;
        }
      }
    }
  }
  
  .bottom-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 30rpx;
    background: #fff;
    box-shadow: $shadow-lg;
    
    .price-info {
      .label {
        font-size: 26rpx;
        color: $text-regular;
        margin-right: 10rpx;
      }
      
      .price {
        font-size: 32rpx;
        color: $danger;
        font-weight: bold;
      }
      
      .free {
        font-size: 32rpx;
        color: $success;
        font-weight: bold;
      }
    }
    
    .submit-btn {
      width: 240rpx;
    }
  }
}

.patient-popup {
  background: #fff;
  border-radius: $radius-lg $radius-lg 0 0;
  
  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1rpx solid #eee;
    
    .title {
      font-size: 32rpx;
      color: $text-primary;
      font-weight: bold;
    }
    
    .close {
      font-size: 40rpx;
      color: $text-secondary;
      padding: 0 20rpx;
    }
  }
  
  .patient-list {
    padding: 20rpx 30rpx;
    max-height: 60vh;
    overflow-y: auto;
    
    .patient-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx;
      margin-bottom: 20rpx;
      background: $bg-color;
      border-radius: $radius-md;
      transition: all 0.3s;
      
      &.active {
        background: $primary-light;
        
        .patient-info {
          .name {
            color: $primary-color;
          }
        }
      }
      
      .patient-info {
        .name {
          font-size: 30rpx;
          color: $text-primary;
          font-weight: bold;
          margin-bottom: 8rpx;
          display: block;
        }
        
        .id-card {
          font-size: 24rpx;
          color: $text-secondary;
        }
      }
      
      .relation {
        font-size: 26rpx;
        color: $text-regular;
        background: #fff;
        padding: 4rpx 12rpx;
        border-radius: $radius-sm;
      }
    }
    
    .add-patient {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 30rpx;
      background: $bg-color;
      border-radius: $radius-md;
      border: 2rpx dashed $text-secondary;
      
      .icon-add {
        font-size: 32rpx;
        color: $text-secondary;
        margin-right: 8rpx;
      }
      
      text {
        font-size: 28rpx;
        color: $text-secondary;
      }
    }
  }
  
  .popup-footer {
    padding: 20rpx 30rpx;
    border-top: 1rpx solid #eee;
    
    .confirm-btn {
      width: 100%;
    }
  }
}
</style> 